<script type="text/javascript">
jQuery(function($){
	$('#crop-label').slideUp();
	// Create variables (in this scope) to hold the API and image size
		var jcrop_api, boundx, boundy;
		var width = $(document).width();
		var bWidth = 810;
		if(width<810){
			bWidth = 518;
		}
		$('#target').Jcrop({
			boxWidth: bWidth,
			onChange: updatePreview,
			onSelect: updateCoords,
			onRelease: hidePreview,
			aspectRatio: 1
		},function(){
			// Use the API to get the real image size
			var bounds = this.getBounds();
			boundx = bounds[0];
			boundy = bounds[1];
			// Store the API in the jcrop_api variable
			jcrop_api = this;
			jcrop_api.animateTo( [<?php echo $this->x ?>, <?php echo $this->y ?>,  <?php echo $this->x2 ?>, <?php echo $this->y2 ?> ]);
		});
	
		function updateCoords(c)
		{
			$('#x').val(c.x);
			$('#y').val(c.y);
			$('#w').val(c.w);
			$('#h').val(c.h);
		};

		function checkCoords()
		{
			if (parseInt($('#w').val())) return true;
			alert('Please select a crop region then press submit.');
			return false;
		};
	
		function hidePreview()
		{
			$('#preview').stop().fadeOut('fast');
		}
  
		function updatePreview(c)
		{
			updateCoords(c);
			if (parseInt(c.w) > 0)
			{
				var rx = 150 / c.w;
				var ry = 150 / c.h;

				$('#preview').css({
					width: Math.round(rx * boundx) + 'px',
					height: Math.round(ry * boundy) + 'px',
					marginLeft: '-' + Math.round(rx * c.x) + 'px',
					marginTop: '-' + Math.round(ry * c.y) + 'px'
				}).show();
			}
		};
	});
</script>

<?php if (isset($this->image)): ?>
	<table align="center">
		<tr>
			<td>
				<label for="target"><?php echo $this->translate('MSG_EXPLAIN_DROP_IMAGE');?></label>
				<img src="<?php echo STATIC_URL . '/media/image/' . $this->image; ?>" id="target" alt="Entry image" />
			</td>
		</tr>
		<tr>
			<td>
				<label for="preview"><?php echo $this->translate('LABEL_PREVIEW');?></label>
				<div style="width:150px;height:150px;overflow:hidden;">
					<img src="<?php echo STATIC_URL . '/media/image/' . $this->image; ?>" id="preview" alt="Entry image" />
				</div>
			</td>
		</tr>
	</table>
	<?php echo $this->form; ?>
<?php endif; ?>
<?php echo $this->partial('index/scrollTop.phtml'); ?>